<template>
    <div>
        <el-card>
            <el-radio-group v-model="searchModel">
                <el-radio-button label="漫画" value="cartoon" />
                <el-radio-button label="电子书" value="novel" />
            </el-radio-group>
        </el-card>

        <el-card style="margin-top: 20px;background-color: rgb(255, 255, 255,0.2);">
            <div>
                <span style="font:400 14px 微软雅黑;">
                    {{ "\"" + searchVal + "\" 的搜索结果: " + dataList.length + " 条数据" }}
                </span>
            </div>
            <Model :dataList="dataList" :Detail="Detail" :hasFooter="false" />
        </el-card>


    </div>
</template>

<script setup lang="ts">
import Model from '@/components/ModelVue.vue';
import { ref, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import axios, { HttpStatusCode } from 'axios';
import { ElMessage } from 'element-plus'

const router = useRouter();
const route = useRoute();

const searchVal = route.query.searchVal;

const searchModel = ref('cartoon');

const types = ref([
    '少年',
    '少女',
    '青年',
])
const searchType = ref<string[]>([]);

const dataList = ref([])


onMounted(
    () => {
        search();
    }
)
watch(
    () => searchModel.value,
    () => {
        search();
    })

const search = async () => {
    try {
        const url = '/api/' + searchModel.value + '/searchVo?searchVal=' + searchVal;
        const result = await axios.get(url);
        if (result.data.code === HttpStatusCode.Ok) {
            dataList.value = result.data.data;
        }
    } catch (error) {
        console.log(error);

        ElMessage.error({
            showClose: true,
            message: "数据获取失败！！！"
        })
    }
}

const Detail = function (data) {
    let name;
    let params;
    if (searchModel.value === 'cartoon') {
        name = 'cartoonDetail';
        params = { cid: data.cid }
    } else if (searchModel.value === 'novel') {
        name = 'novelDetail';
        params = { nid: data.nid }
    }
    router.push({ name: name, params: params })
}
</script>